<script setup>
name: 'home'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/userStore'
import { getmenusAPI } from '@/api/homeAPI'

// 设置中文
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = ref(zhCn)

const userStore = useUserStore()
const router = useRouter();

// 退出登录
const logout = () => {
    userStore.logout()
    // 清空 session 数据
    window.sessionStorage.clear()
    router.push('/login')
}

// 获取菜单列表
const menus = ref({})
const getmenus = async () => {
    const { data: res } = await getmenusAPI()
    if (res.meta.status !== 200) return ElMessage.error(res.meta.msg)
    menus.value = res.data
}
// 控制折叠面板
const iscollapse = ref(false)
const toggleCollapse = () => {
    iscollapse.value = !iscollapse.value
}

// 一级菜单字体图标
const icons = reactive({
    '125': 'iconfont icon-user',
    '103': 'iconfont icon-tijikongjian',
    '101': 'iconfont icon-shangpin',
    '102': 'iconfont icon-danju',
    '145': 'iconfont icon-baobiao'
})

onMounted(() => {
    getmenus()
})


</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="logo_box">
                    <img src="@/assets/vue.svg" alt="">
                    <span>电商后台管理系统</span>
                </div>
                <el-button type="info" size="large" @click="logout">退出</el-button>
            </el-header>
            <el-container>
                <el-aside :width="iscollapse ? '64px' : '200px'">
                    <div class="home_left">
                        <!-- 折叠与展开按钮 -->
                        <div class="toggle-button" @click="toggleCollapse">|||</div>
                        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff" router
                            :collapse="iscollapse" unique-opened :collapse-transition="false" :default-active="router.currentRoute.value.fullPath">
                            <el-sub-menu :index="`${index + 1}`" v-for="(menu, index) in menus" :key="menu.id">
                                <template #title>
                                    <i :class="icons[menu.id]"></i>
                                    <span class="menu">{{ menu.authName }}</span>
                                </template>
                                <el-menu-item :index="`/home/${item.path}`" v-for="item in menu.children" :key="item.id">
                                    <template #title>
                                        <el-icon>
                                            <Menu />
                                        </el-icon>
                                        <span>{{ item.authName }}</span>
                                    </template>
                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </div>
                </el-aside>
                <el-main>
                    <ElConfigProvider :locale="locale">
                        <RouterView />
                    </ElConfigProvider>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.common-layout {
    height: 100%;
    width: 100%;

    .el-container {
        height: 100%;

        .el-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 60px;
            background-color: #373d41;
            padding: 0;

            .logo_box {
                display: flex;
                align-items: center;
                height: 100%;

                img {
                    height: 100%;
                }

                span {
                    color: #fff;
                    font-size: 24px;
                    margin-left: 10px;
                }
            }

            .el-button {
                margin-right: 20px;
            }
        }

        .home_left {
            height: 100%;

            background-color: #333744;

            .toggle-button {
                background-color: #4A5064;
                font-size: 10px;
                line-height: 24px;
                color: #fff;
                text-align: center;
                letter-spacing: 0.2em;
                cursor: pointer;
            }

            .menu {
                margin-left: 5px;
            }
        }

        .el-main {
            background-color: #eaedf1;
        }
    }
}
</style>